import { useState } from 'react'
import { View, Text, StyleSheet, Pressable, Animated } from 'react-native'
import { common } from '../../assets/style/common'
import { sortListData, curSort } from './goodSearch'
import { useCardAnimation } from '@react-navigation/stack'

export default function GoodSearchSort({
  route,
  navigation,
}: any): JSX.Element {
  const [params] = useState<{ paddingTop: number; type: number }>(
    JSON.parse(route.params),
  )
  const { current } = useCardAnimation()

  function goBack() {
    navigation.goBack()
  }
  function setType(id: number) {
    curSort.id = id
    navigation.goBack()
  }

  return (
    <Pressable onPress={goBack} style={[common.flexCol, style.page]}>
      <View style={{ height: params.paddingTop }} />
      <Animated.View
        style={[
          style.cover,
          {
            opacity: current.progress,
          },
        ]}
      >
        <Pressable style={style.box}>
          {sortListData.map(item => (
            <Pressable
              onPress={() => setType(item.id)}
              key={item.id}
              style={style.item}
            >
              <Text
                style={[
                  style.itemTxt,
                  item.id === params.type && style.itemActive,
                ]}
              >
                {item.label}
              </Text>
            </Pressable>
          ))}
        </Pressable>
      </Animated.View>
    </Pressable>
  )
}

const style = StyleSheet.create({
  page: {
    width: '100%',
    height: '100%',
    flexDirection: 'column',
  },
  cover: {
    width: '100%',
    flex: 1,
    backgroundColor: '#000000aa',
    borderTopColor: '#f4f4f4',
    borderTopWidth: 1,
  },
  box: {
    backgroundColor: '#ffffff',
    paddingVertical: 10,
    borderBottomLeftRadius: 8,
    borderBottomRightRadius: 8,
  },
  item: {
    paddingVertical: 10,
    paddingHorizontal: 12,
    fontSize: 14,
  },
  itemTxt: {
    color: '#333333',
  },
  itemActive: {
    color: '#fb969a',
    fontWeight: 'bold',
  },
})
